<template>
  <div id="mapContainer">
    <div class="panel">
      <el-button @click="drawPoint">绘制点</el-button>
      <el-button @click="drawLine">绘制线</el-button>
      <el-button @click="drawPolygon">绘制面</el-button>
      <el-button @click="drawMarker">绘制标注</el-button>
      <el-button @click="drawText">添加文本标注</el-button>
    </div>
  </div>
</template>
<script setup>
import { Map, View } from "ol";
import { fromLonLat, get } from "ol/proj";

import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import Feature from "ol/feature";
import { Point, LineString, Polygon } from "ol/geom";
import { Style, Stroke, Fill, Circle, Icon, Text } from "ol/style";

import GeoJSON from "ol/format/GeoJSON.js";

import * as turf from "@turf/turf";
import * as radash from "radash";

import { onMounted, nextTick, ref } from "vue";

import { tdt_api_key /** 天地图的key */ } from "@/config/keys.json";
import { addTdtBaseLayer } from "@/utils/baseMap.js";
import { flyTo } from "../../utils/view";

function initMap() {
  const map = new Map({
    view: new View({
      //   center: fromLonLat([114.5, 31]),
      projection: "EPSG:4326",
      center: [114.5, 31],
      zoom: 9,
    }),
    target: "mapContainer",
    controls: [],
  });

  // 加载底图
  addTdtBaseLayer(map, tdt_api_key, "img", "c", "wmts");
  window.map = map;
}

onMounted(() => {
  nextTick(() => {
    initMap();
  });
});

//t- 绘制点
function drawPoint() {
  //   drawSinglePoint();
  drawMultiPoint();
}

// 绘制单个点
function drawSinglePoint() {
  // 点坐标
  const position = [114.5, 31]; //点的坐标位置

  // 点样式
  const style = new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: "red",
      }),
      stroke: new Stroke({
        color: "white",
        width: 2,
      }),
    }),
  });

  const point = new Feature({
    geometry: new Point(position),
  });

  point.setStyle(style);

  const pointLayer = new VectorLayer({
    properties: {
      name: "点图层",
    },
    source: new VectorSource({
      features: [point],
    }),
  });

  window.map.addLayer(pointLayer);
}

// 绘制多个点
function drawMultiPoint() {
  // 点坐标
  const positions = [];
  //点的数量
  const count = 100;
  // 当前的视图范围
  const extent = window.map.getView().calculateExtent();

  // 随机生成点位置
  for (let i = 0; i < count; i++) {
    positions.push(turf.randomPosition(extent));
  }

  // 点样式
  const style = new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: "red",
      }),
      stroke: new Stroke({
        color: "white",
        width: 2,
      }),
    }),
  });

  const points = positions.map(position => {
    const point = new Feature({
      geometry: new Point(position),
    });

    return point;
  });

  const pointLayer = new VectorLayer({
    properties: {
      name: "点图层",
    },
    source: new VectorSource({
      features: points,
    }),
    style,
  });

  window.map.addLayer(pointLayer);
}

// t- 绘制线
function drawLine() {
  // 线坐标
  const coordinates = [];
  //点的数量
  const count = 4;
  // 当前的视图范围
  const extent = window.map.getView().calculateExtent();

  // 随机生成点位置
  for (let i = 0; i < count; i++) {
    coordinates.push(turf.randomPosition(extent));
  }
  // 线样式
  const style = new Style({
    stroke: new Stroke({
      color: "red",
      width: 2,
    }),
  });

  const line = new Feature({
    geometry: new LineString(coordinates),
  });

  line.setStyle(style);

  const lineLayer = new VectorLayer({
    properties: {
      name: "线图层",
    },
    source: new VectorSource({
      features: [line],
    }),
  });

  window.map.addLayer(lineLayer);
}

// t- 绘制面
function drawPolygon() {
  // 面坐标
  // const coordinates = [
  //   [
  //     [114.5, 31],
  //     [114.5, 32],
  //     [115.5, 32],
  //     [115.5, 31],
  //     [114.5, 31],
  //   ],
  // ];

  const coordinates = [
    [
      // 外环
      [114, 31],
      [114, 32],
      [115, 32],
      [115, 31],
      [114, 31],
    ],
    [
      // 内环（孔洞）
      [114.2, 31.2],
      [114.2, 31.8],
      [114.8, 31.8],
      [114.8, 31.2],
      [114.2, 31.2],
    ],
  ];

  // 面样式
  const style = new Style({
    fill: new Fill({
      color: "rgba(255, 0, 0, 0.3)",
    }),
    stroke: new Stroke({
      color: "red",
      width: 2,
    }),
  });

  const polygon = new Feature({
    geometry: new Polygon(coordinates),
  });

  polygon.setStyle(style);

  const polygonLayer = new VectorLayer({
    properties: {
      name: "面图层",
    },
    source: new VectorSource({
      features: [polygon],
    }),
  });

  window.map.addLayer(polygonLayer);
}

// t-绘制标记（图标点）
function drawMarker() {
  // 图片地址
  const urls = [
    "src/assets/icon/bianmu.svg",
    "src/assets/icon/buoumao.svg",
    "src/assets/icon/cangao.svg",
    "src/assets/icon/cangshu.svg",
    "src/assets/icon/chaiquan.svg",
    "src/assets/icon/fadou.svg",
    "src/assets/icon/hashiqi.svg",
  ];

  const texts = ["边牧", "布偶猫", "藏獒", "仓鼠", "柴犬", "法斗", "哈士奇"];

  // 生成随机点
  const count = 10;
  const extent = window.map.getView().calculateExtent();
  const points = turf.randomPoint(count, { bbox: extent });

  // 将点加载到地图中
  const format = new GeoJSON();
  const features = format.readFeatures(points);
  const markerLayer = new VectorLayer({
    properties: {
      name: "图片标注图层",
    },
    source: new VectorSource({
      features,
    }),
    style: feature => {
      const index = Math.floor(Math.random() * urls.length);

      return new Style({
        image: new Icon({
          anchor: [0.5, 1],
          src: urls[index],
          scale: 0.1,
        }),
      });
      // return new Style({
      //   image: new Icon({
      //     anchor: [0.5, 1],
      //     src: urls[index],
      //     scale: 0.1,
      //   }),
      //   text: new Text({
      //     text: texts[index],
      //     font: "12px sans-serif",
      //     fill: new Fill({
      //       color: "red",
      //     }),
      //     stroke: new Stroke({
      //       color: "white",
      //       width: 2,
      //     }),
      //     offsetY: 10,
      //   }),
      // });
    },
  });

  window.map.addLayer(markerLayer);
}

function drawText() {
  // 点坐标
  const position = [114.5, 31]; //点的坐标位置

  // 点样式
  const style = new Style({
    text: new Text({
      text: "武汉",
      font: "42px sans-serif",
      fill: new Fill({
        color: "red",
      }),
      stroke: new Stroke({
        color: "white",
        width: 2,
      }),
      offsetY: 10,
    }),
  });

  const point = new Feature({
    geometry: new Point(position),
  });

  point.setStyle(style);

  const pointLayer = new VectorLayer({
    properties: {
      name: "点图层",
    },
    source: new VectorSource({
      features: [point],
    }),
  });

  window.map.addLayer(pointLayer);
}
</script>

<style scoped>
#mapContainer {
  width: 100%;
  height: 99vh;
}

.panel {
  position: absolute;
  top: 10px;
  left: 150px;
  z-index: 999;
}
</style>
